<template>
  <div :class="['about-works', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="about-works-title">
      精品推荐
    </div>
    <div class="art-work-box">
      <div class="art-work-list" v-if="artWorkList.length != 0">
        <div class="content" v-for="(item, index) in artWorkList" :key="index" @click="goDesc(item.data_id, item.work_type)">
          <div class="img-content" @click="lookBig(item.opus_id[0]?.id)">
            <el-image class="img" :src="item.title_page" alt="" fit="cover" />
            <p class="tag">
              {{ typeOptions.find((s) => s.data_id == item.type)?.name }}
            </p>
          </div>
          <div class="title">
            {{ item.work_name }}
          </div>
          <div class="second-title">
            <p class="author">
              {{ item.work_author }}
            </p>
            <!-- <p class="quality">
              {{ item.quality }}
            </p> -->
          </div>
          <div class="collect" @click="handleCollect(item.data_id, item.is_focus, index)">
            <img v-if="item.is_focus" src="@/static/img/favorite_grey_active.png" alt="">
            <img v-else src="@/static/img/favorite_grey.png" alt="">
            收藏
          </div>
        </div>
      </div>
      <el-empty v-else description="暂无数据"></el-empty>
      <div @click="lookMore" v-if="!$ua.isFromPc()" class="look-more" v-show="this.artWorkList.length < this.workTotal">
        查看更多
      </div>
      <Pagin
        ref="page"
        v-show="artWorkList.length !== 0 && $ua.isFromPc()"
        :func="getDataList"
        :pagesSizes="[10, 20, 30, 50]"
        :sizeNum="$ua.isFromPc() ? 8 : 4"
        :layout="'prev, pager, next'"
        background
        :position="'center'"
        class="pagin"
      ></Pagin>
    </div>
  </div>
</template>

<script>
// import artWorkList from './artWorkList'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      artWorkList: [],
      typeOptions: [],
      page_num: 1,
      page_count: 4,
      workTotal: 0
    }
  },
  computed: {

  },
  watch: {},
  created () {},
  mounted () {
    this.refresh()
    this.$api.getProductType({}, {}).then((res) => {
      this.typeOptions = res.result.item_list.filter(item => item.parent_id == -1)
    });
  },
  methods: {
    goDesc(data_id, type) {
      if (type == 1) {
        window.open(`/artwork/desc?data_id=${data_id}`, '_blank')
      } else if (type == 2) {
        window.open(`/onlineVideo/desc?data_id=${data_id}&type=${type}`, '_blank')
      }
    },
    handleCollect(data_id, is_focus, index) {
      if (this.$store.state.user.token) {
        if (!is_focus) {
          this.$api.workFocus({ work_id: data_id - 0 }, {}).then(res => {
            if (res.status == "$SUCCESS") {
              this.$message.success('收藏成功')
              this.artWorkList[index].is_focus = true
              // this.refresh()
            }
          })
        } else {
          this.$message.warning('您已收藏该作品')
        }
      } else {
        this.$message.error('请先登陆')
      }
    },
    refresh() {
      this.$refs.page.refresh()
    },
    getDataList(page, page_size, callback) {
      let params = {
        page_num: page,
        page_count: page_size,
        special_id: this.$route.query.data_id
      }
      // 获取专题活动列表
      this.$api.getActivityWork(params).then(res => {
        if (res.status == '$SUCCESS') {
          console.log('res.result.item_list', res.result.item_list)
          this.artWorkList = Array.isArray(res.result.item_list) ? res.result.item_list : []
          this.workTotal = res.result.total_count
          callback(this.artWorkList, res.result.total_count)
        }
      })
      // 这里要写接口然后把数据和total丢进去
    },
    // 查看大图
    lookBig(id) {
      console.log(id)
      if (process.browser && id) {
        let {
          BasicDraw,
          BigImageShow
        } = require("../../../utils/main.js")
        let basicDraw = new BasicDraw(); // 创建基础渲染类
        basicDraw.start(); // 开始渲染
        new BigImageShow().showBigImg(id)

        document.getElementById('bigIamgeClose').addEventListener('click', (e) => {
          basicDraw.dispose()
          e.stopPropagation()
        })
      }
    },
    lookMore() {
      this.page_num++
      let params = {
        page_num: this.page_num,
        page_count: this.page_count,
        special_id: this.$route.query.data_id
      }
      this.$api.getActivityWork(params).then(res => {
        if (res.status == '$SUCCESS') {
          console.log('res.result.item_list', res.result)
          this.picture_total = res.result.total_count
          if (Array.isArray(res.result.item_list)) {
            res.result.item_list.forEach(item => {
              this.picture_list.push(item)
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.about-works {
  &.z-web {
    background: #fff;
    position: relative;

    .about-works-title {
      font-size: 44px;
      font-weight: 600;
      color: #000;
      line-height: 72px;
      text-align: center;
      margin-bottom: 32px;
    }

    .art-work-box {
      .art-work-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        &::after {
          content: '';
          flex: 0 0 411px;
        }

        .content {
          width: 411px;
          height: 414px;
          cursor: pointer;
          margin-bottom: 100px;

          &:nth-child(3n) {
            margin-right: 0;
          }
          .img-content {
            width: 100%;
            height: 308px;
            position: relative;

            ::v-deep(.el-image) {
              width: 100%;
              height: 100%;
            }

            .tag {
              width: 120px;
              height: 36px;
              position: absolute;
              left: 0;
              bottom: 0;
              background: #F7E6D0;
              display: flex;
              align-items: center;
              justify-content: center;
              line-height: 15px;
              font-size: 16px;
              font-weight: 600;
              color: #000;
            }
          }

          .title {
            margin: 30px 0 16px;
            line-height: 16px;
            font-size: 16px;
            font-weight: 600;
            color: #000;
          }

          .second-title {
            line-height: 16px;
            font-size: 16px;
            font-weight: 600;
            color: #999;
            margin-bottom: 12px;

            p {
              display: inline-block;
            }

            .author {
              margin-right: 10px;
            }
          }

          .collect {
            color: #999;
            font-size: 16px;
            cursor: pointer;

            img {
              // width: 30px;
              width: 18px;
              height: 18px;
              position: relative;
              top: -3px;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }

  &.z-phone {
    padding: 0 pxtorem(24) pxtorem(60);
    .about-works-title {
      font-size: pxtorem(36);
      font-weight: 600;
      color: #000;
      text-align: center;
      margin: pxtorem(40) 0;
    }

    .art-work-box {
      .art-work-list {
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, pxtorem(340));
        grid-gap: 10px;

        .content {
          margin-bottom: pxtorem(40);
          .img-content {
            width: pxtorem(340);
            height: pxtorem(254);
            position: relative;

            ::v-deep(.el-image) {
              width: 100%;
              height: 100%;
            }

            .tag {
              position: absolute;
              bottom: 0;
              left: 0;
              width: pxtorem(120);
              height: pxtorem(36);
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #F7E6D0;
              font-size: pxtorem(18);
              font-weight: 600;
            }
          }

          .title {
            width: pxtorem(340);
            margin-top: pxtorem(16);
            font-size: pxtorem(22);
            font-weight: 600;
            color: #000;
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap;
          }
          .collect,
          .second-title {
            font-size: pxtorem(22);
            font-weight: 600;
            color: #999999;
            .author {
              margin-bottom: pxtorem(10);
            }
          }
        }
      }
    }
  }
}
</style>
